<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="./lib/vue.js"></script>
</head>

<body>
  <div id="app">

    <input type="button" value="点我哦" @click="flag = !flag">
    <!-- v-if 每次删除或创建元素 -->
    <!-- v-show: 每次不会重新进行dom的删除和创建操作,只是切换display:none 的样式 -->
    <!-- v-if 有较高的切换性能消耗 -->
    <!-- v-show 有较高的初始渲染消耗 -->
    <!-- 如果元素设计到频繁的切换,最好不要使用v-if,而是使用 v-show -->
    <!-- 如果元素可能永远也不会被显示出来被用户看到,则推荐使用v-if -->
    <h1 v-if="flag">这是v-if控制的元素</h1>
    <h1 v-show="flag">这是v-show控制的元素</h1>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        flag: true
      },
      methods: {
        toggle(){

        }
      }
    })
  </script>



</body>

</html>
